<template>
  <div style="margin:0;padding:0;">
    <div>
      <div class="Zt"
           style="width: 100%; height: 100%;"
      >
        <div class="div" v-for="(item,index) in pfwjList" :key="index">
          <el-tag>{{ item.nd }}</el-tag>
          <div
            style="
              font-size: 19px;
              font-weight: bold;
              font-family: '楷体';
              text-align: center;
              margin: 30px auto;
              margin-top:40px;
              color:#fff;
            "
          >
            {{ item.wjName }}
          </div>

          <span
            style="
              position: relative;
              bottom: -30px;
              display: inline-block;
              margin: auto 10px auto 20px;
              font-size: 15px;
              font-family: '仿宋';
               color:#fff;
            "
          >专利号：</span
          >
          <span
            style="
              position: relative;
              bottom: -30px;
              display: inline-block;
              margin: auto auto auto 5px;
              font-size: 15px;
              font-family: '仿宋';
               color:#fff;
            "
          >{{ item.fwDw }}</span
          >
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listPfwj
} from "@/api/xmgl/pfwj/pfwj";

export default {
  components: {listPfwj},
  name: "pfwjbg", //批复文件表格
  created() {
    this.getList();
  },
  data() {
    return {
      // 总条数
      total: 0,
      loading: false,
      // 批复文件表格数据
      pfwjList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        wjName: null,
        nd: null,
        fwZh: null,
        sfYx: null,
        fwDw: null,
        userId: null,
        deptId: null
      },

    };
  },
  methods: {
    /** 查询批复文件列表 */
    getList() {
      this.loading = true;
      listPfwj(this.queryParams).then(response => {
        // console.log(response)
        // this.pfwjList = response.rows;
        // this.total = response.total;
        // this.loading = false;

        // 将 API 返回的数据行赋值给 pfwjList
        this.pfwjList = response.rows || [];
        this.total = response.total || 0;
        this.loading = false;
        // console.log(this.pfwjList);
      });
    },
  }
}
</script>

<style scoped>
.Zt {
  display: grid;
  grid-gap: 1rem; /* 控制网格项之间的间距 */
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  justify-items: center; /* 水平居中对齐 */
}

.div {
  width: 300px; /* 设置固定的宽度 */
  max-width: calc(100% - 2rem); /* 确保在小屏幕上卡片不会超出容器 */
  height: 200px;
  background-image: linear-gradient(to right, #1a4265, #2b72a8);
  transition: transform 0.3s;
  background-size: 100%;
  margin: 21px auto auto;
  border-radius: 10px;
  box-sizing: border-box; /* 确保padding和border包含在width内 */
}

/* 媒体查询，当屏幕小于某个宽度时，调整样式 */
@media (max-width: 768px) {
  .div {
    width: 90%; /* 在小屏幕上占据更多宽度 */
    margin: 10px 5%; /* 减少上下间距，增加左右间距 */
  }
}

.el-tag {
  width: 60px;
  height: 30px;
  line-height: 30px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  margin: 10px 200px auto 14px;
  color: #999898;
}
</style>
